<template>
    <div class="registerLogin">
        <div v-if="user.authenticated" class="userInfo"  @mouseover="anShow" @mouseout="anHide">
            <div class="userTitle" style="height:70px;">
               <router-link to="/userCore">
                <img :src="user.userInfo.data.avatar" alt="">
                
                <!-- <img src="http://a.hiphotos.baidu.com/image/pic/item/960a304e251f95caf1852c0bc4177f3e6709521e.jpg" alt=""> -->
                <!-- <span v-text="user.userInfo.data.name" class="userNameInfo"> -->
                <!-- </span> -->
               </router-link> 
                
            </div>
                <div class="userOperate" v-show="accountNumber">
                    <i class="newSanjiao"></i>
                <!-- <li>
                    <router-link :to="{name: 'userCore', params: {activeName:'msg'}}" >
                    消息（{{user.userInfo.data.notifications}}）
                    </router-link>
                </li> 
                 <li>
                    <router-link :to="{name: 'userCore', params: {activeName:'data'}}" >
                    个人中心
                    </router-link>
                </li>-->
                <p class="clearfix newUserInfo">
                    <img :src="user.userInfo.data.avatar" alt="">
                    <span v-text="user.userInfo.data.name"></span>
                    <span v-text="'账号：'+user.userInfo.data.mobile"></span>
                </p>
                <div>
                    <router-link :to="{path:'/author',query:{id:user.userInfo.data.user_id}}" >
                    我的主页
                    </router-link>
                </div>
                <div>
                    <router-link :to="{name: 'userCore', params: {activeName:'msg'}}" >
                    我的消息
                    </router-link>
                    <i class="unread" v-if="user.userInfo.data.notifications>0"></i>
                </div>
                <div>
                    <router-link :to="{name: 'userCore', params: {activeName:'data'}}" >
                    个人资料
                    </router-link>
                </div>
                <div @click="loginOut">
                    退出
                </div>
            </div>
        </div>
        <div v-else class="registeredLogin" @click="loginShow">
            <button @click="loginLoginName">登录</button>
            <button @click="registerLoginName" class="registerBtn">注册</button>
        </div>
    </div>
</template>
<script>
import jwtToken from '../helpers/jwt'
import { ErrorBag } from 'vee-validate';

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:"loginRegister",
    data(){
        return{
            accountNumber : false,//我的账号开关
            msgNum : 0,
        }
    },
    filter: {//限制昵称的显示长度
        ellipsis (value) {
            if (!value) return ''
            if (value.length > 3) {
                return value.slice(0,2) + '...'
            }
            return value
        }
    },
    methods: {
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        ...mapActions([//axios中的方法

        ]),
        loginOut () {//退出登录状态
            return axios
             .post("/logout")//退出接口
             .then(response => {
                location. reload();
               jwtToken.removeToken();
               this.$router.push({path: "/"})
               this.$store.dispatch("unsetAuthUser");
             });
             
        },
        handleClick(tab, event) {//注册登录选项卡
            console.log(tab, event);
        },
         anShow(){//我的账号鼠标移入事件
            this.accountNumber = true;
        },
        anHide(){//我的账号鼠标移出事件
            this.accountNumber = false;
        },
    },
    mounted () {
        if(this.$route.query.gojishe=='login'){
            this.loginLoginName();
            this.loginShow();
        }else if(this.$route.query.gojishe=='register'){
            this.registerLoginName();
            this.loginShow();
        }
       
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    }
}
</script>
<style>
   .userNameInfo{
        white-space: nowrap;  
        text-overflow:ellipsis; 
        overflow:hidden; 
   }
   .registerBtn:hover{
       color: #ec5b55!important;
   }
   .registerLogin{
       position:relative;
       z-index:3;
       
    padding-top: 7px;
    /* overflow: hidden; */
   }
   .newUserInfo{
       height: 94px;
       padding-top: 23px;
       padding-left: 11px;
       border-bottom: 1px solid #e8e8e8;
       margin-bottom: 9px;
   }
   .newUserInfo img{
       margin-left: 0;
       float:left;
       width: 50px;
       height: 50px;
       border-radius: 25px;
   }
   .newUserInfo span{
       text-align: left;
       float:left;
       width: 116px;
       margin-left: 10px;
   }
   .newUserInfo span:nth-of-type(1){
       font-size: 16px;
       line-height: 22px;
       color: #3b3b3b;
       margin-top: 6px;
   }
   .newUserInfo span:nth-of-type(2){
       font-size: 12px;
       line-height: 18px;
       color: #797979;
       padding-right: 0;
   }
   .unread{
       float: right;
       width: 6px;
       height: 6px;
       background: #ea514b;
       border-radius: 3px;
       margin-top: 14px;
       margin-right: 12px;
   }
   .newSanjiao{
       position:absolute;
       top:-14px;
       right: 21px;
       width: 18px;
       height: 14px;
       background: url(./img/sanjiao.jpg) no-repeat;
   }
</style>